<html>

<head>
  <meta charset="utf-8">
  <title>模型变形动画</title>
  <script src='../w3d.js' type="text/javascript"></script>
  <script src='../config.js' type="text/javascript"></script>
  <script src='../../lib/lil-gui.umd.min.js' type="text/javascript"></script>
  <script type="text/javascript">

    let engine, scene, canvas, body,geometry,sampler,entity;
    function init () {
      canvas = document.getElementById('canvas');
      body = document.getElementById('body');
     let path=[
        `../../demo/pub/assets/skybox/twilight/pos-x.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-x.jpg`,
        `../../demo/pub/assets/skybox/twilight/pos-y.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-y.jpg`,
        `../../demo/pub/assets/skybox/twilight/pos-z.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-z.jpg`
        ]
      engine = new w.Engine({auth,
        canvas: canvas,
        contextmunu:false,//是否支持右键菜单
        background: path,
        environment: path,
        intensity: 1,
        ambientColor:"#ffffff",
        ambientIntensity:0.2
      });
      engine.init(this.initGPU);
    }
    function initGPU () {
      scene=engine.scene;
      scene.postProcessing.add(new w.effects.Fxaa());
      // scene.orbit.maxPitch=Math.PI/3;//限制操作相机的orbit组件的最大倾斜角度。
      initCamera();//初始化相机姿态
      addMesh();//添加点
      // addAnimation('none');
      // initGUI();
    }
    function initCamera(){
      let camera = engine.scene.getCamera()
      camera.near = 1;
      camera.far = 10000;
      camera.trans.position=[0,0,600];
      camera.pitch=Math.PI/2.5;
      camera.roll=-Math.PI/2;
    }
    function addMesh () {
      //添加房屋
      let url = ip + 'demo/pub/assets/testmodel/Horse.glb';
      engine.res.gltfLoader.load(url, {indexedDB:true,position: [0, 0, 0], rotation: [Math.PI/2, 0]}, (gltf) => {
        engine.scene.addEntity(gltf);
      });
    }
    function addAnimation(easing){
        let animation=new w.animation.Animation({id:"earth",loop:0});
        //offset
        sampler=new w.animation.Sampler([0,3], [[0,0,0],[0,0,Math.PI*2]],"LINEAR", easing);
        let channel=new w.animation.Channel(entity.trans,"rotation");
        channel.add(sampler);
        animation.add(channel);

        scene.addAnimation(animation);
    }

    function initGUI(){
        const GUI = lil.GUI;
        const gui = new GUI();
        let folder = gui.addFolder('animation');
        folder.add(sampler, 'easing', easing);
    }

  </script>
  <style>
    html,
    body,
    #canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body onload="init()">
  <canvas id="canvas"></canvas>
</body>

</html>